<!--
[watch]

- 作用: 监视数据的变化 (和 Vue2 中的 watch 作用一致)
- 特点: Vue3 中的 watch 只能监视以下四种数据:
  1. ref 定义的数据
  2. reactive 定义的数据
  3. 函数返回一个值
  4. 一个包含上述内容的数组

情况一
监视 ref 定义的 [基本类型] 数据: 直接写数据名即可, 监视的是其 value 值的改变.
-->
<template>
  <div class="person">
    <h1>情况一: 监视 【ref】 定义的 【基本类型】 数据</h1>
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我 sum + 1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref, watch } from 'vue';

  // 数据
  let sum = ref(0)

  // 方法
  function changeSum() {
    sum.value += 1
  }

  // 监视, 情况一: 监视 【ref】 定义的 【基本类型】 数据
  const stopWatch = watch(sum, (newValue, oldValue) => {
    console.log('sum变化了', newValue, oldValue)
    if (newValue >= 10 ) {
      stopWatch()
    }
  })
  console.log(stopWatch)
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>